import clsx from "clsx";

interface IInput
  extends React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  > {}

export const Input: React.FC<IInput> = ({ className, ...nest }) => {
  return (
    <input
      {...nest}
      className={clsx(
        "p-2 md:text-lg rounded outline-none focus:shadow-md",
        "text-green-700 ring-green-700 ring-1",
        "placeholder-green-700/50",
        className
      )}
    />
  );
};

interface ITextarea
  extends React.DetailedHTMLProps<
    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
    HTMLTextAreaElement
  > {}

export const Textarea: React.FC<ITextarea> = ({ className, ...nest }) => {
  return (
    <textarea
      {...nest}
      className={clsx(
        "p-2 md:text-lg rounded-md",
        "align-bottom min-h-[100px] outline-none focus:shadow-lg",
        "ring-green-700 text-green-700 ring-1",
        "placeholder-green-700/50",
        className
      )}
    />
  );
};
